<!--
 * @Author: 'zhangkeqq' '2211709169@qq.com'
 * @Date: 2025-07-24 18:03:14
 * @LastEditors: 'zhangkeqq' '2211709169@qq.com'
 * @LastEditTime: 2025-07-25 15:58:15
 * @FilePath: \vue3-admin\src\views\login\components\forget_password.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
	<!-- 忘记密码 -->
	<el-dialog v-model="state.forgetPasswordDialog" title="忘记密码" width="400px">
		<el-form class="login-form" :label-position="labelPosition" :rules="rules">
			<el-form-item label="输入您的注册账号" prop="account">
				<el-input v-model="forgetData.account" placeholder="输入您的注册账号" />
			</el-form-item>
			<el-form-item label="输入您的个人邮箱" prop="email">
				<el-input v-model="forgetData.email" placeholder="输入您的个人邮箱" />
			</el-form-item>
		</el-form>
		<!-- 底部内容 -->
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="state.forgetPasswordDialog = false">取消</el-button>
				<el-button type="primary" @click="verifyAccount">
					下一步
				</el-button>
			</span>
		</template>
	</el-dialog>
	<!-- 修改密码 -->
	<el-dialog v-model="state.changePasswordDialog" title="修改密码" width="400px">
		<el-form class="login-form" :label-position="labelPosition" :rules="rules">
			<el-form-item label="输入您的新密码" prop="password">
				<el-input v-model="forgetData.password" placeholder="输入您的新密码" show-password/>
			</el-form-item>
			<el-form-item label="再次确认您的新密码" prop="nextPassword">
				<el-input v-model="forgetData.nextPassword" placeholder="再次确认您的新密码" show-password/>
			</el-form-item>
		</el-form>
		<!-- 底部内容 -->
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="state.changePasswordDialog = false">取消</el-button>
				<el-button type="primary" @click="resetPassword">
					确定
				</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import type {forgetFormData,verifyFormData,resetFormData} from '@/api/login/type.ts'
import {verify,reset} from '@/api/login/index.ts'
import { ElMessage } from 'element-plus'
// 表单对齐方式
const labelPosition = ref('top')
const forgetData:forgetFormData = reactive({
    account:'',
    email:'',
    password:'',
    nextPassword:'',
})
const rules = reactive({
    account: [
        { required: true, message: '请输入您的注册账号', trigger: 'blur' },
    ],
    email: [
        { required: true, message: '请输入您的注册邮箱', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '请输入您想修改的密码', trigger: 'blur' },
    ],
    nextPassword: [
        { required: true, message: '请再次确认您的新密码', trigger: 'blur' },
    ]
})
//控制弹框关闭的
const state = reactive({
    forgetPasswordDialog:false,
    changePasswordDialog:false,
})
//点击下一步的事件
const verifyAccount = async ()=>{
	let data:verifyFormData = {account:forgetData.account,email:forgetData.email}
	const res:any = await verify(data)
	if(res.status == 0){
		localStorage.setItem('id',res.id)
		state.forgetPasswordDialog = false
    	state.changePasswordDialog = true
		ElMessage({
            type:'success',
            message:'操作成功'
        })
	}else{
		ElMessage({
            type:'error',
            message:'操作失败'
        })
	}

}
//点击确定的事件
const resetPassword = async()=>{
	const data:resetFormData = {id:localStorage.getItem('id'),newPassword:forgetData.password}
	const res:any = await reset(data) 
	if(res.status == 0 ){
		state.changePasswordDialog = false
		ElMessage({
            type:'success',
            message:'更新成功'
        })
	}else{
		ElMessage({
            type:'error',
            message:'更新失败'
        })
	}
    
}

//打开弹框
const open = ()=>{
    state.forgetPasswordDialog = true
}

//对外暴露
defineExpose({
    open
})
</script>

<style scoped>
</style>
